<template>
	<view>
		<view class="bx-list detail-title-border">
			<view class="bx-list-title" @click="togohitchSelect">
				<view class="left">
					<view style="color: red;">*</view>厂家类型
				</view>
				<view class="right1">
					<view :class="[factoryData.factoryType!=''?'select-bg':'']">
						{{factoryData.factoryType!=''?factoryData.factoryTypeName:'请选择'}}
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<view class="bx-list detail-title-border">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>厂家名称
				</view>
				<view class="right1">
					<view class="right-input">
						<input placeholder="请输入厂家名称" v-model="factoryData.factoryName" />
					</view>
				</view>
			</view>
		</view>
		<view class="bx-list detail-title-border">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>联系人姓名
				</view>
				<view class="right1">
					<view class="right-input">
						<input placeholder="请输入联系人姓名" v-model="factoryData.linkMan" />
					</view>
				</view>
			</view>
		</view>
		<view class="bx-list detail-title-border">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>电话
				</view>
				<view class="right1">
					<view class="right-input">
						<input placeholder="请输入联系人电话" v-model="factoryData.linkTel" />
					</view>
				</view>
			</view>
		</view>
		<view class="bx-list detail-title-border" @click="toggleTab">
			<view class="bx-list-title">
				<view class="left">
					地址
				</view>
				<view class="right1">
					<view :class="[factoryData.province!=''?'select-bg':'']">
						{{factoryData.province!=''?factoryData.province+factoryData.city+factoryData.area:'请选择'}}
					</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<view class="bx-list detail-title-border">
			<view class="bx-list-title">
				<view class="left">
					详细地址
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea class="textrea" maxlength='32' v-model="factoryData.address"
					placeholder="请输入"></u--textarea>
			</view>
		</view>
		<view class="bx-list detail-title-border">
			<view class="bx-list-title">
				<view class="left">
					供货范围
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea class="textrea" maxlength='32' v-model="factoryData.supplyScope"
					placeholder="请输入"></u--textarea>
			</view>
		</view>
		<view class="bottom-subside"></view>
		<view class="bx-bottom">
			<view class="btn-right" @click="submit">保存</view>
		</view>
		<u-popup :show="showgzType" mode="bottom" :round="10" @close="close" @open="open">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem(item)" v-for="(item,index) in factoryList" :key="index">
					{{item.configValue}}
				</view>
			</view>
		</u-popup>
		<u-popup :show="cityType" mode="bottom" :round="10" @close="close" @open="open">
			<view class="popup">
				<view class="picker-btn">
					<view class="left" @click="cancel">取消</view>
					<view class="right" @click="confirm">确定</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" :value="valueArr" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in province" :key="index">{<!-- -->{item.text}}
						</view>
					</picker-view-column>
					<picker-view-column v-if="province[valueArr[0]]">
						<view class="item" v-for="(item,index) in province[valueArr[0]].children" :key="index">
							{<!-- -->{item.text}}</view>
					</picker-view-column>
					<picker-view-column v-if="province[valueArr[0]]">
						<view class="item" v-for="(item,index) in province[valueArr[0]].children[valueArr[1]].children"
							:key="index">{<!-- -->{item.text}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const cityRows = require('@/common/data.json')
	export default {
		data() {
			return {
				//from数据
				factoryData: {
					factoryType: '', //厂家类型id
					factoryTypeName: '', //厂家类型name
					factoryName: '', //厂家name
					linkMan: '', //联系人
					linkTel: '', //联系电话
					provinceId: '', //省份id
					province: '', //省份
					cityId: '', //市id
					city: '', //市名称	
					areaId: '', //区县id	
					area: '', //区县
					address: '', //详细地址
					supplyScope: '', //供货范围
				},

				showgzType: false, //选择器
				factoryList: [], //厂家类型
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列
				province: [], // 数据列表
				cityType: false,
			}
		},
		onLoad() {
			//获取厂家类型
			this.getFactoryList()
			// 省市区数据树生成
			this.province = this.get_city_tree()
			console.log('province', this.province)
		},
		methods: {
			//厂家类型选择
			togohitchSelect() {
				this.showgzType = true;
			},
			open() {},
			close() {
				this.showgzType = false
			},
			//选择厂家类型
			updateItem(item) {
				this.factoryData.factoryType = item.id;
				this.factoryData.factoryTypeName = item.configValue;
				this.showgzType = false;
			},
			//获取厂家类型
			getFactoryList() {
				uni.$u.http.post(`/device/mobile/sysDataDictionary/dictionaryList`, {
					configType: 'factory_type'
				}).then(res => {
					if (res.code == 0) {
						this.factoryList = res.data
					}
				}).catch(err => {})
			},
			// 省市区数据树生成
			get_city_tree() {
				let res = []
				if (cityRows.length) {
					// 递归生成
					res = this.handleTree(cityRows)
				}
				return res
			},

			/**
			 * 递归生成树结构数据 - 省市区
			 * 
			 * @param {Object} data
			 * @param {String} parent_code 上级ID | null代表需要顶部菜单
			 * @author Lich
			 */
			handleTree(data, parent_code = null) {
				let res = []

				let keys = {
					id: 'code',
					pid: 'parent_code',
					children: 'children',

					text: 'name',
					value: 'code'
				}

				let oneItemDEMO = {
					text: '',
					value: '',
					children: []
				}
				let oneItem = {}

				// 循环
				for (let index in data) {
					// 判断
					if (parent_code === null) {
						// 顶级菜单 - 省
						if (!data[index].hasOwnProperty(keys.pid) || data[index][keys.pid] == parent_code) {
							// 不存在parent_code，或者已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]

							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)

						} else {
							// 匹配不到，跳过
						}

					} else {
						// 非顶级菜单 - 市、区、街道
						if (data[index].hasOwnProperty(keys.pid) && data[index][keys.pid] == parent_code) {
							// 已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]

							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)

						} else {
							// 匹配不到，跳过
						}

					}

				}

				return res
			},
			//选择城市
			toggleTab() {
				this.cityType = true
			},
			//确定选择城市
			confirm() {

				let province = this.province[this.valueArr[0]]
				let city = province.children[this.valueArr[1]]
				let area = city.children[this.valueArr[2]]
				this.factoryData.provinceId = province.value
				this.factoryData.province = province.text
				this.factoryData.cityId = city.value
				this.factoryData.city = city.text
				this.factoryData.areaId = area.value
				this.factoryData.area = area.text
				console.log('province', province, city, area)
				this.cityType = false
			},
			cancel() {
				this.cityType = false
			},
			//选择城市联机
			bindChange(e) {
				const val = e.detail.value
				this.valueArr = val
			},
			//保存
			submit() {
				if (!this.factoryData.factoryType) return uni.$u.toast('请选择厂家类型');
				if (!this.factoryData.factoryName) return uni.$u.toast('请填写厂家名称');
				if (!this.factoryData.linkMan) return uni.$u.toast('请填写联系人');
				if (!this.factoryData.linkTel) return uni.$u.toast('请填写联系电话');

				uni.$u.http.post(`/device/mobile/devicePurveyor/addPurveyor`, this.factoryData).then(res => {
					if (res.code == 0) {
						uni.$u.toast('新增成功!')
						//跳转页面并且传递参数
						uni.$emit('factoryItem', this.factoryData);
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 500)
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	.bx-list {
		background: #fff;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;

			.left {
				display: flex;
				font-size: 32rpx;
				font-weight: 400;
				color: #4D4D4D;
				word-break: break-all;
				word-wrap: break-word;
				width: 250rpx;
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				color: #8c8c8c;

				.right-input {
					width: 100%;
					text-align: right;
					display: flex;
					align-items: center;
					color: #2B2B2B;
				}

				.select-bg {

					color: #2B2B2B;
				}
			}
		}

		.select-look {
			padding-left: 30rpx;
			padding-bottom: 30rpx;

			.look-item {
				padding: 10rpx 20rpx;
				border-radius: 24rpx;
				color: #0F53AC;
				background-color: rgba(2, 173, 130, 0.3);
				font-size: 24rpx;
			}
		}

		.bx-info {
			display: flex;
			padding: 10rpx 20rpx 20rpx 20rpx;

			.left-icon {
				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 12rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt1 {
					color: #000000;
					font-size: 34rpx;
					font-weight: 400;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

		}

		.input-textrea {
			// margin: 20rpx;
			margin: 0 32rpx 32rpx 32rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

	}

	.popup {
		height: fit-content;
		width: 100%;
		background: #fff;
	}

	.picker-btn {
		display: flex;
		height: 100upx;
		width: 100%;
		line-height: 100upx;
		background: #fff;
		font-size: 34upx;
		z-index: 1;
		border-bottom: 1rpx solid #f8f8f8;

		.left {
			flex: 1;
			color: #0076FF;
			padding-left: 40upx;
			box-sizing: border-box;
		}

		.right {
			flex: 1;
			text-align: right;
			padding-right: 40upx;
			color: #FE4533;
			box-sizing: border-box;
		}
	}

	picker-view {
		width: 100%;
		height: 500rpx;
		display: relative;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
	
	.bottom-subside {
		width: 100%;
		height: 206rpx;
	}

	.bx-bottom {
		width: 100%;
		background: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 33rpx 0 80rpx 0;
		position: fixed;
		z-index: 9;
		bottom: 0;

		.btn-right {
			width: 90%;
			height: 92rpx;
			border-radius: 12rpx;
			background: #0F53AC;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
		}
	}
</style>